<template>
	<view class="pr">
		<view class="background w-max pa" style="border-radius: 0 0 100% 100% /0 0 50rpx 50rpx;">
			<u-navbar :isBack="false" :borderBottom="false" :background="{}" />
			<view class="h200"></view>
		</view>
		<u-navbar :background="{...$background,backgroundSize: '100% calc(100% + 200rpx)'}" :isBack="false"
			:borderBottom="false">
			<view class="pl20 pr20 flex   w-max">
				<!-- #ifndef MP-WEIXIN -->
				<view class="flex1"></view>
				<!-- #endif -->
				<view class="color-fff" v-if="$user.city_name" @click="$jump('/pages/my/set/autonym',{type:'city'})">
					当前服务城市:{{$user.city_name}}</view>

				<view class="color-fff" v-else @click="$jump('/pages/my/set/autonym')">
					当前服务城市:未实名</view>

				<view class="flex1"></view>
			</view>
		</u-navbar>
		<kefu />

		<!-- style="min-height:calc(100vh - 180rpx - 44px - var(--window-top));" -->

		<view class="p20 pr z-index2">
			<view class="bg-fff radius20 p20 flex h210">
				<view class="flex1">
					<userInfo />
				</view>
				<view class="fs24" @click="shang">
					<view class="color-zs" v-if="$user.status==1">●上线中</view>
					<view class="color-999" v-else>●下线中</view>
				</view>
			</view>
			<view class="mt30  radius20"
				style="background: linear-gradient(180deg,#fff 0rpx,#fff 100rpx, #fff0 300rpx);" v-if="tabList.length">
				<view class="flex list radius20">
					<view class="flex h68 raduis-tab border-tab">
						<view v-for="(item, index) in tabList" :key="index" class="flex row-center pl40 pr40"
							:class="current == index ? 'current_on' : ''" @click="current = index">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="" v-if="tabList[current].type=='agency'&&$user.is_join_agency!=1">
					<view class="p40">
						<view class="flex-col col-center border p40 radius20 bg-fff">
							<view class="fw-w fs32 ">提示</view>
							<view class="mt40">请加入团队或者有一个团队后再能查看并接单团队订单</view>
							<view class="mt40">
								<u-button shape="circle" @click="$jump('/pages/my/team/team')">去团队</u-button>
							</view>
						</view>
					</view>
				</view>
				<orderList :list="list" v-else />
			</view>
		</view>

		<view class="flex row-center pt20 p20 color-666" v-if="$config.is_company!==0"
			style="position: sticky;bottom: 0;">
			<text>{{$config.company||'©技术支持:河南探迹信息技术有限公司'}}</text>
		</view>



		<u-popup v-model="autonymShow" mode="center" width="600" borderRadius="20">
			<view class="">
				<view class="flex-col col-center border p40 radius20 bg-fff">
					<view class="fw-w fs32 ">提示</view>
					<view class="mt40">未实名,是否去实名</view>
					<view class="mt50 w-max">
						<view class="flex">
							<view class="flex1 ">
								<u-button type="warning" plain ripple @click="autonymShow=false,goDome()">去下单</u-button>
							</view>
							<view class="w40"></view>
							<view class="flex1 ">
								<u-button type="warning" ripple
									@click="autonymShow=false,$jump('/pages/my/set/autonym')">去实名</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				autonymShow: false,
				current: 0, //当前选中导航tab 医院 陪诊师 陪诊团队
				data: '',

				list: '',
				page: 1,
			};
		},
		computed: {
			tabList() {
				let list = [{
						type: 'public',
						name: '公共订单',
					},
					{
						type: 'agency',
						name: '团队订单',
						show: this.$config.is_show_agency == 1
					},
				]
				list = list.filter(e => !(typeof(e.show) == 'boolean' && !e.show))
				return list
			}
		},
		watch: {
			current(e) {
				this.getList()
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList()
			this.$getUser().then(async res => {
				if (res.is_name_auth == -1) {
					this.autonymShow = true
				}
			})
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			goDome() {
				// #ifdef MP-WEIXIN
				wx.navigateToMiniProgram({
					appId: this.$config.miniapp_id, //要打开的小程序appid
					path: '/pages/index/index', //要打开另一个小程序的页面和传递的参数
					envVersion: 'release', //打开小程序的版本（体验版trial；开发版develop；正式版release）
					success(res2) {
						// ·· //打开成功之后事件
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				this.$jumps(this.$baseUrl + '/h5/#/')
				// #endif
			},
			getList(e) {
				let data = this.tabList?.[this.current] || ''
				if (!data) return
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					page: this.page,
					type: data.type
				}
				this.$request('/master/order/orderList', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
			async shang() {
				let status = this.$user.status
				let aa = status == 1 ? '下线' : '上线'
				await this.$showModal('提示', '你要修改为' + aa + '吗')
				this.$request('/master/my/editInfo', {
					status: (!status) * 1
				}).then(this.$getUser)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #EFFBF9;
	}

	.raduis-tab {
		border-radius: 20rpx 0px 30rpx 0px;
	}

	.border-tab {
		border: 1px solid #A6EAEC;
	}

	.list {
		background: linear-gradient(180deg, rgba(9, 199, 202, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.current_on {
		height: 100%;
		border-radius: 20rpx 0px 30rpx 0px;
		color: #FFFFFF;
		background: linear-gradient(180deg, $zs 0%, transparentize($color: $zs, $amount: .5) 100%);
	}

	:deep(.u-dropdown__menu__item) {
		justify-content: flex-start !important;
	}
</style>